<template>
  <div>
<el-card>
  <el-form>
    <el-row type="flex">
      <el-col :span="8">
        <el-form-item label="司机账户：" label-width="120px">
          <el-input v-model="page.account" placeholder="请输入司机账户"/>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="司机姓名：" label-width="120px">
          <el-input v-model="page.name" placeholder="请输入司机姓名"/>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="司机手机号：" label-width="120px">
          <el-input v-model="page.phone" placeholder="请输入司机手机号"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="所属机构：" label-width="120px">
          <TreeSelect
            v-model="page.agentId"
            :normalizer="normalizer"
            :options="treeData"
            placeholder="请选择所属机构"
            :appendToBody="true"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-button type="danger" @click="search">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </el-col>
    </el-row>
  </el-form>
</el-card>
    <el-card>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="180"/>
        <el-table-column
          prop="account"
          label="司机账户"
          width="180"/>
        <el-table-column
          prop="name"
          label="司机姓名"
          width="180"/>
        <el-table-column
          prop="mobile"
          label="司机电话"/>
        <el-table-column
          prop="truck.licensePlate"
          label="关联车辆"/>
        <el-table-column
          prop="agency.name"
          label="所属机构"/>
        <el-table-column
          prop="workStatus"
          label="工作状态">
          <template #default="{row}">
            <el-row type="flex" style="width: 70px" align="middle"  v-if="row.workStatus===0">
              <el-col> <div style="width: 10px;height: 10px;border-radius: 50%;background-color: red "/></el-col>
              <el-col>休息</el-col>
            </el-row>
            <el-row type="flex" style="width: 70px" align="middle"  v-else>
              <el-col> <div style="width: 10px;height: 10px;border-radius: 50%;background-color: #95ec69 "/></el-col>
              <el-col>上班</el-col>
            </el-row>
          </template>

        </el-table-column>
        <el-table-column
          label="操作">
          <template #default="{row}">
            <el-button type="text" size="small" @click="view(row.userId)">查看</el-button>
            <el-button type="text" size="small">配置车辆</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--    分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { GetListApi } from '@/api/instiution'
import { getDriverList } from '@/api/driver'

export default {
  components: { TreeSelect },
  name: 'DriverIndex',
  data () {
    return {
      page: {
        account: '', // 账户
        name: '', // 姓名
        phone: '', // 手机号
        agentId: null, // 机构id
        page: 1,
        pageSize: 10
      },
      total: 0,
      treeData: [],
      tableData: []
    }
  },
  created () {
    this.getTreeData()
    this.getTableData()
  },
  methods: {
    // 搜索
    search () {
      this.getTableData(this.page)
    },
    // 重置
    reset () {
      this.page = {
        account: '', // 账户
        name: '', // 姓名
        phone: '', // 手机号
        agentId: null, // 机构id
        page: 1,
        pageSize: 10
      }
      this.getTableData()
    },
    normalizer (node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    // 获取机构树
    async getTreeData () {
      const res = await GetListApi()
      this.treeData = JSON.parse(res.data)
      console.log(this.treeData)
    },
    // 获取司机分页数据
    async getTableData () {
      const res = await getDriverList(this.page)
      console.log(res)
      this.tableData = res.data.items
      this.total = +res.data.counts
    },
    // 监听pagesize改变
    handleSizeChange (newSize) {
      this.page.pagesize = newSize
      console.log(this.page.pagesize)
    },
    // 监听pagename改变
    async handleCurrentChange (newNum) {
      this.page.page = newNum
      console.log(this.page.page)
      this.getTableData()
    },
    // 查看
    view (id) {
      this.$router.push({ path: '/transit/driver-detail', query: { id: id, formUrlName: '司机管理' } })
    }
  }
}
</script>

<style lang="less">
.svg.vue-treeselect__control-arrow {
  width: 10px;
  height: 10px;
}
.path{
  width: 10px;
  height: 10px;
}
</style>
